<script setup lang="ts">

import ArkPage from "./ArkPage.vue";
import ArkButton from "../element/ArkButton.vue";
defineProps({
  width:{
    type:Number,
    default:760
  },
  height:{
    type:Number,
    default:480
  },
  backgroundColor:{
    type:String,
    default:'#FFFFFF'
  },
  borderRadius:{
    type:Number,
    default:32
  },
})
</script>

<template>
  <ark-page background-color="rgba(0,0,0,0.8)">
    <div class="ark-dialog" :style="{
      width,height,backgroundColor,borderRadius
    }">
      <slot/>
    </div>
  </ark-page>
</template>

<style scoped>
.ark-dialog{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

</style>
